<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script>
    const libPath = 'http://localhost:8080/mapbox/'
    const geoPath = 'http://localhost:8081/geoserver/gwc/service/tms/1.0.0/';
    const style = {
        "version": 8,
        "name": "lzugis",
        "sprite": libPath + "bank",
        "sources": {
            "base-vector": {
                'type':'vector',
                'scheme':'tms',
                'tiles':[geoPath + '/lzugis%3Alayer_china@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']
            }
        },
        "layers": [{
            "type": "background",
            "id": "background",
            "paint": {
                "background-color": "#fffbf6"
            }
        },{
            'id': 'base-boundry',
            'source': 'base-vector',
            'source-layer':'china_prov_people',
            'type': 'line',
            "paint": {
                "line-color": "#fdcda7",
                "line-width": 2,
                "line-opacity": 1
            }
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.5,
        minZoom: 2,
        maxZoom: 18
    });
</script>
</body>
</html>